<template>
  <div class="main">
  <router-link to="/HelloWorld/page1">Go to pageA</router-link>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/HelloWorld">
      <span class="iconfont icon-fangzi"></span>
      <span class="tab-link">项目</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/pending">
      <span class="iconfont icon-935caidan_daiban"></span>
      <span class="tab-link">待办</span>

    </router-link>
    <router-link tag="div" class="tab-item" to="/new">
      <span class="iconfont icon-xinfeng"></span>
      <span class="tab-link">消息</span>
    </router-link>
    <router-link tag="div" class="tab-item" to="/mine">
      <span class="iconfont icon-04"></span>
      <span class="tab-link">我的</span>
    </router-link>
  </div>
  <transition :name='transitionName'>
      <keep-alive include="page3">
        <router-view  class='child-view'></router-view>
      </keep-alive>
  </transition>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      transitionName: 'vux-pop-in'
    }
  },
  computed: {
    key() {
      return this.$route.path.replace(/\//g, '_')
    }
  },
  watch: {
    $route(to,from){
        console.log(1,to.name,from.name)
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        if (toDepth === fromDepth) {
            this.enter = '';
            return false;
        }
        this.enter = toDepth > fromDepth ? "slide-right" : "slide-left"
        this.leave = toDepth > fromDepth ? "slide-left" : "slide-right"
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  scoped>

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
  will-change: transform;
  transition: all .4s cubic-bezier(.55,0,.1,1);
  //transition: all .4s cubic-bezier(1,1,0,0);
}
.vux-pop-out-enter {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}


.main {
  width:100%;
  height: 100%;
  position: relative;
}
  .tab {
    display: flex;
    width: 100%;
    position: absolute;
    height: 50px;
    font-size: $font-size-small;
    bottom: 0;
    box-shadow: -1px 1px 3px #ccc;
    background: $color-white;
    z-index: 497;
  }
  .tab-item {
      position: relative;
      flex: 1;
      line-height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      color: $color-9;
    }
</style>
